<template>
    <div id="chart" ref="chart"></div>
</template>
<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core';
import { inject, onMounted, ref, watch } from 'vue';


const props = defineProps<{
    title?: string,
    textColor?: string
    Data: string[][],
    color?: string[]
}>()


const echarts = inject('echarts') as any
const chart = ref()
const color = ['#975FE5', '#5771ff', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#5fffe4']
let chartInstance: any
let highlightInterval: any = null;
let currentIndex = 0;


const data = ref<any[]>([])

function getData() {
    return props.Data.slice(1).map(row => (
        // {
        //     name: row[0],
        //     value: row.slice(1).reduce((acc, cur) => acc + Number(cur), 0)
        // }
        [row[0], row.slice(1).reduce((acc, cur) => acc + Number(cur), 0)]
    ))
}



watch(() => props.Data, () => {
    if (chartInstance) {
        chartInstance.clear()
        data.value = getData()

        console.log(data.value);
        const options = getOption()
        chartInstance.setOption(options)

        // 重置索引并重启自动高亮
        currentIndex = 0;
        startAutoHighlight();
    }
}, { deep: true })

function getOption() {
    return {
        title: {
            text: props.title,
            textStyle: {
                fontSize: 14,
                fontFamily: '黑体',
                color: props.textColor ? props.textColor : '#fff'
            }
        },
        color: props.color ? props.color : color,
        legend: {
            type: 'scroll',
            orient: 'vertical',
            height: '80%',
            top: 0,
            right: 0
        },
        tooltip: {
            trigger: 'item',
        },
        dataset: {
            source: data.value
        },
        grid: { top: '55%' },
        dataZoom: {
            start: 0,
            end: 100
        },
        series: [
            {
                type: 'pie',
                id: 'pie',
                radius: ['50%', '75%'],
                center: ['40%', '50%'],
                name: '科室总数统计',
                emphasis: {
                    focus: 'self',
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 700,
                        fontFamily: '黑体',
                    }
                },
                label: {
                    show: false,
                    formatter: `{c}个\n{d}%`,
                    position: 'center'
                }
            }
        ]
    }
}

onMounted(() => {
    data.value = getData()
    chartInstance = echarts.init(chart.value)
    const option = getOption()

    console.log(option);
    chartInstance.setOption(option)
    const handleResize = useDebounceFn(() => {
        chartInstance.resize()
    }, 1000)

    window.addEventListener('resize', () => handleResize())

    // 启动自动高亮
    startAutoHighlight();
})

// 添加清除定时器的函数
function clearHighlightInterval() {
    if (highlightInterval) {
        clearInterval(highlightInterval);
        highlightInterval = null;
    }
}
// 添加启动自动高亮的函数
function startAutoHighlight() {
    clearHighlightInterval();

    if (!chartInstance || !data.value || data.value.length === 0) return;

    highlightInterval = setInterval(() => {
        if (!chartInstance) return;

        // 取消之前高亮
        chartInstance.dispatchAction({
            type: 'downplay',
            seriesIndex: 0
        });

        // 高亮当前项
        chartInstance.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
        });

        // 更新索引
        currentIndex = (currentIndex + 1) % data.value.length;
    }, 2000); // 每2秒切换一次
}

</script>
<style lang="scss" scoped>
#chart {
    width: 100%;
    height: 100%;
}
</style>